(function($) {
    if(typeof Vue != 'undefined') {
        Vue.component("chosen-select",{
            props:{
              value: [String, Array],
              multiple: Boolean
            },
            template:`<select :multiple="multiple"><slot></slot></select>`,
            mounted(){
                var self = this;
              $(this.$el)
                .val(this.value)
                .chosen({
                    disable_search_threshold: 999,
                        width: '100%'
                })
                .on("change", function(e) {
                    self.$emit('input', $(self.$el).val());
                    $(self.$el).trigger('chosen:updated');
                });
            },
            watch:{
              value(val){
                 $(this.$el).val(val).trigger('chosen:updated');
              }
            },
            destroyed() {
                $(this.$el).chosen('destroy');
            }
          });
    }

    $(document).ready(function(){
        $('input[type="checkbox"]').each(function(i, el){
            $(el).button();
        });
        $('body').on('select-all-clicked', function() {
            $('input[type="checkbox"]').each(function(i, el){
                $(el).button('refresh');
            });
        });
        
        $('input[type="radio"]').each(function(i, el){
            $(el).button();
        });

        
        $('select:not(.disable-ui)').each(function(i, el) {
        var _select = $(this);
        var _hidden = _select.is(':hidden');
        _select.chosen({
            disable_search_threshold: 999,
                width: '100%'
        });
        if(_hidden) {
            var id = _select.attr('id');
            if(!id) {
            var name = _select.attr('name');
            id = name + Math.round(Math.random() * 10000000);
            _select.attr('id', id);
            }
            var _id = id + '_chosen';
                    $('#' + _id).hide();
        }
        });
    });
})(jQuery);